<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>ShieldJS2 Index</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	<link type="text/css" rel="stylesheet" href="styles/site.Cerulean.css">

</head>

<body>

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="index.html">ShieldJS2</a>
		<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
        </button>
	</div>
	<div class="navbar-collapse collapse" id="topNavigation">
		<ul class="nav navbar-nav">
			
			<li class="dropdown">
				<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="ShieldJS.core._defaults.html">ShieldJS.core._defaults</a></li>
				</ul>
			</li>
			
			<li class="dropdown">
				<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="$().contentChange.html">$().contentChange</a></li><li><a href="$().insertAtCursor.html">$().insertAtCursor</a></li><li><a href="$().resize.html">$().resize</a></li><li><a href="$().selection.html">$().selection</a></li><li><a href="$().serializeJson.html">$().serializeJson</a></li><li><a href="$().shieldBindHtmlAction.html">$().shieldBindHtmlAction</a></li><li><a href="$().shieldLeftMenu.html">$().shieldLeftMenu</a></li><li><a href="$().shieldMainContent.html">$().shieldMainContent</a></li><li><a href="Dialog.html">Dialog</a></li><li><a href="Map.html">Map</a></li><li><a href="ShieldJS.html">ShieldJS</a></li><li><a href="ShieldJS.ajax.html">ShieldJS.ajax</a></li><li><a href="ShieldJS.core.html">ShieldJS.core</a></li><li><a href="ShieldJS.dialog.html">ShieldJS.dialog</a></li><li><a href="ShieldJS.form.html">ShieldJS.form</a></li><li><a href="ShieldJS.HtmlAction.html">ShieldJS.HtmlAction</a></li><li><a href="ShieldJS.HtmlAction.HTMLEleActions.html">ShieldJS.HtmlAction.HTMLEleActions</a></li><li><a href="ShieldJS.HtmlAction.successDo.html">ShieldJS.HtmlAction.successDo</a></li><li><a href="ShieldJS.HtmlAction.successDoMethod.html">ShieldJS.HtmlAction.successDoMethod</a></li><li><a href="String.replaceAll.html">String.replaceAll</a></li>
				</ul>
			</li>
			
			<li class="dropdown">
				<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="global.html#dateFormat">dateFormat</a></li><li><a href="global.html#ele">ele</a></li><li><a href="global.html#findAndMarkEle">findAndMarkEle</a></li><li><a href="global.html#findAndMarkEleOn">findAndMarkEleOn</a></li><li><a href="global.html#findEle">findEle</a></li><li><a href="global.html#formatUrl">formatUrl</a></li><li><a href="global.html#getExtendSettings">getExtendSettings</a></li><li><a href="global.html#getjQueryObj">getjQueryObj</a></li><li><a href="global.html#getJSDir">getJSDir</a></li><li><a href="global.html#getJSPath">getJSPath</a></li><li><a href="global.html#getParams">getParams</a></li><li><a href="global.html#getRandomColor">getRandomColor</a></li><li><a href="global.html#getSettings">getSettings</a></li><li><a href="global.html#getTimeAttr">getTimeAttr</a></li><li><a href="global.html#hasAttr">hasAttr</a></li><li><a href="global.html#height">height</a></li><li><a href="global.html#index">index</a></li><li><a href="global.html#jQObjEmpty2Null">jQObjEmpty2Null</a></li><li><a href="global.html#openNewPage">openNewPage</a></li><li><a href="global.html#paramNameAdapt">paramNameAdapt</a></li><li><a href="global.html#preEle">preEle</a></li><li><a href="global.html#preEleIndex">preEleIndex</a></li><li><a href="global.html#printCallStack">printCallStack</a></li><li><a href="global.html#removeHtml">removeHtml</a></li><li><a href="global.html#replaceParamVal">replaceParamVal</a></li><li><a href="global.html#title">title</a></li><li><a href="global.html#width">width</a></li>
				</ul>
			</li>
			
		</ul>
        
            <div class="col-sm-3 col-md-3">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
                        <div class="input-group-btn">
                            <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        
	</div>

</div>
</div>


<div class="container" id="toc-content">
<div class="row">

	
	<div class="col-md-8">
	
		<div id="main">
			

	
	











	
	





    <section class="readme-section">
        <article><p>[TOC]</p>
<h3>shieldjs2框架</h3><p><img src="https://img.shields.io/badge/release-2.0.0-blue.svg" alt=""></p>
<h4>项目说明</h4><ul>
<li>富客户端框架(jQuery RIA framework)设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级；<br>本框架支持用html扩展的方式来代替javascript代码, 只要懂html语法, 再参考使用手册就可以做ajax开发；尽量让程序员少写javascript，也能使用各种页面组件和ajax技术。如果有特定需求也可以扩展框架做定制化开发。<br>本框架的目标是不需要开发人员去关心javascript怎么写，只要写标准html就可以了。本框架简单扩展了html标准, 给HTML定义了一些特别的 class 和 attribute 。框架会找到当前请求结果中的那些特别的 class 和 attribute, 并自动关联上相应的js处理事件和效果。<br>;</li>
<li>第一次打开页面时载入界面到客户端，之后和服务器的交互只是数据交互，不占用界面相关的网络流量。</li>
<li>支持HTML扩展方式来调用组件。</li>
<li>标准化Ajax开发, 降低Ajax开发成本。</li>
</ul>
<h4>目录说明</h4><ul>
<li>core    shieldjs2框架的核心库，必须引入，不引入不能使用;</li>
<li>doc      shieldjs2框架的说明文档;</li>
<li>docstrap shieldjs2框架的说明文档的样式模板;</li>
<li>depends shieldjs2框架依赖的js库，可以不引入，不引入部分功能不能使用;</li>
<li>extends shieldjs2框架的扩展库，不需要不引入，只是做了示例，在具体实现类中扩展;</li>
<li>impl    shieldjs2框架的具体实现，必须引入，不引入不能使用大部分功能;</li>
<li>tool    shieldjs2框架包含的模块库，必须引入，不引入不能使用，可独立于该框架作为工具类使用;</li>
</ul>
<h4>命名说明</h4><ul>
<li><p>提示框                          ShieldJS.alert(title, msg, type); //type字符型（success、error、info、warning）</p>
</li>
<li><p>确认框             ShieldJS.confirm(title, message, ok, cancel)</p>
</li>
<li><p>data-url       链接</p>
</li>
<li><p>data-url-node   节点url，用于树形结构等</p>
</li>
<li><p>data-url-show定义新增按钮的url【非必需，没有可不填】</p>
</li>
<li><p>data-url-add定义新增按钮的url【非必需，没有可不填】</p>
</li>
<li><p>data-url-upd定义修改按钮的url【非必需，没有可不填】</p>
</li>
<li><p>data-url-del定义删除按钮的url【非必需，没有可不填】</p>
</li>
<li><p>data-target    目标对象 data-target，搜索按钮，</p>
</li>
<li><p>paramSelector  参数选择器,动态参数</p>
</li>
<li><p>paramAdapter   参数适配器,适配 源字段名1&gt;目标字段名1#源字段名2[&gt;目标字段名1]，源字段名与目标字段名一致时目标字段名可省略</p>
</li>
<li><p>selectNode     选中节点,从0开始</p>
</li>
<li><p>shieldSettings 插件参数设置</p>
</li>
<li><p>data-rel-type 类型shieldDialog：iframe ，addtabs：new </p>
</li>
<li><p>data-rel-id id用于区分tab等</p>
</li>
<li><p>操作列 S|U|D，R代表Show查看，U代表Update更新，D代表Delete删除可以不写值,showName用于该列title前缀【非必需】，没有时取tab标题栏的.title内容 </p>
</li>
<li><p>不需要初始化的插件元素，增加样式<mark>noshield</mark></p>
</li>
<li><p>不需要表单验证的input元素，增加样式<mark>ignore</mark>（disabled的也不进行验证）</p>
</li>
</ul>
<h4>使用说明</h4><p>1、绑定html动作前后的回调方法，可以增加bindBefore和bindAfter属性，属性值为方法名，建议方法名写长一些。</p>
<pre class="prettyprint source lang-html"><code>&lt;!-- bindAfter表示绑定完成后回调的方法，在页面事件绑定完成后执行，bindBefore是在之前 -->
    &lt;div class=&quot;multi-tab_plugin&quot; style=&quot;overflow: hidden;&quot; bindAfter=&quot;addTab_191009&quot;>
        &lt;div class=&quot;mtab-box&quot; >
            &lt;ul class=&quot;mtab-title clearfix&quot;>
                &lt;li class=&quot;on title&quot; data-url=&quot;${ctxPathA }/system/permission/getPermDetails&quot; shieldParams=&quot;{id:'${id }'}&quot;>权限信息&lt;/li>
                &lt;!-- // on 点击状态 -->
                &lt;li class=&quot;title&quot; data-url=&quot;${ctxPathA }/system/permission/getHasPermRoles&quot; shieldParams=&quot;{id:'${id }'}&quot;>拥有权限的角色&lt;/li>
            &lt;/ul>

        &lt;/div>
        &lt;div class=&quot;mtab-content&quot;>
            &lt;!-- //内容部分  -->
            &lt;div class=&quot;mtab-item multi-show&quot;>
                &lt;%@include file=&quot;sysperm_show_permdetail.jsp&quot;%>
            &lt;/div>
            &lt;!-- //multi-show 当前标签内容部分 -->
            &lt;div class=&quot;mtab-item&quot; style=&quot;display: none;&quot;>
                &lt;%@include file=&quot;sysperm_show_haspermroles.jsp&quot;%>
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;script type=&quot;text/javascript&quot; src=&quot;${ctxPath}/js/lib/jquery.contextmenu.r2.js?20190903085211&quot;>&lt;/script>
    &lt;script>
    var addTab_191009 = function(ele){
        // ele为绑定事件的元素
        var $this = ele;
        alert($this.length)
        $this.multiTabAdd(&quot;test&quot;, &quot;test&quot;, &quot;测试&quot;, 1, &quot;/software-center/a/system/permission/getHasPermRoles?a=b&quot;, &quot;{id:'566578227917619200'}&quot;);
        $this.multiTabAdd(&quot;test&quot;, &quot;test1&quot;, &quot;测试1&quot;);
        $this.multiTabAdd(&quot;test2&quot;, &quot;test2搜索&quot;, &quot;测试2&quot;);
        $this.multiTabAdd(&quot;test3&quot;, &quot;test3为&quot;, &quot;测试3&quot;);
        $this.multiTabAdd(&quot;test4&quot;, &quot;test4释放的&quot;, &quot;测试4&quot;);
        $this.multiTabAdd(&quot;test5&quot;, &quot;test5释放的&quot;, &quot;测试5&quot;);
        $this.multiTabAdd(&quot;test6&quot;, &quot;test6说法是&quot;, &quot;测试6&quot;);
        $this.multiTabAdd(&quot;test7&quot;, &quot;test7释放的&quot;, &quot;测试7&quot;);
        $this.multiTabAdd(&quot;test8&quot;, &quot;test8说法是&quot;, &quot;测试8&quot;);
    }
    &lt;/script></code></pre><h4>插件属性</h4><p>  插件属性采用3种方式获取</p>
<ul>
<li>1、ShieldJS自定义属性采用<strong>“属性名=属性值”</strong>的配置方式，具体属性参考具体使用说明；<pre class="prettyprint source lang-html"><code>&lt;!-- myname为自定义属性名 -->
&lt;a myname=&quot;test&quot;>示例&lt;/a></code></pre><pre class="prettyprint source lang-javascript"><code>// 获取
ele.attr(&quot;myname&quot;);</code></pre></li>
<li>2、本框架采用jQuery的data定义属性,大部分的配置可以采用<strong>“data-属性名”</strong>方式配置，取值时使用data(属性名)取，注意data取值默认会把属性名转换为小写，如果需要<strong>大写用“-”连接</strong>，如需要去data(&quot;userName&quot;),则需要定义为data-user-name。也支持以json格式设置到shieldSettings中；<br>例如：<br>（1）、需要在js中使用jQueryObject.data(&quot;name&quot;)，则属性配置为data-name=&quot;test&quot;;<pre class="prettyprint source lang-html"><code>&lt;a data-name=&quot;test&quot;>示例&lt;/a></code></pre><pre class="prettyprint source lang-javascript"><code>// 获取
ele.data(&quot;name&quot;);</code></pre>（2）、需要在js中使用jQueryObject.data(&quot;nameType&quot;)，属性配置为data-name-type=&quot;test&quot;;<pre class="prettyprint source lang-html"><code>&lt;a data-name-type=&quot;test&quot;>示例&lt;/a></code></pre><pre class="prettyprint source lang-javascript"><code>// 获取,注意T需要为大写，反过来如果为大写的字母，属性前一定要用-连接
ele.data(&quot;nameType&quot;);</code></pre>（3）、配置属性shieldSettings='{name:&quot;test&quot;,show:false}'，框架会自动解析并传入options中。<br>使用 getExtendSettings 获取设置的属性（包含data和shieldSettings都会获取，其中shieldSettings优先级最高）<pre class="prettyprint source lang-html"><code>&lt;!-- 注意本例子中shieldSettings和data-name中都定义了name属性，以shieldSettings优先 -->
&lt;a shieldSettings='{name:&quot;test&quot;,show:false}' data-name=&quot;myname&quot;>示例&lt;/a></code></pre><pre class="prettyprint source lang-javascript"><code>// 获取
var params = {};
getExtendSettings(ele, params);</code></pre></li>
<li>3、第三方插件的属性配置，支持以json格式设置到shieldSettings中，同上。<br>json回调 一般要求有<strong>是否成功（success）</strong>，<strong>返回信息（message）</strong>，<strong>返回结果</strong>3个字段<br>例如：  <pre class="prettyprint source lang-javascript"><code>{  
 &quot;success&quot;:true,
 &quot;message&quot;:&quot;添加成功！&quot;,
 &quot;data&quot;:[{},{}]
}  </code></pre></li>
</ul>
<h4>扩展插件</h4><p>如果默认提供的插件不满足要求可以对插件进行覆盖或增加新的插件</p>
<ul>
<li>扩展插件<br>扩展插件的2种写法： <pre class="prettyprint source lang-javascript"><code>/** 
* @description 示例一，不带checkFn的函数
* @field
* 必需：
*  第一个参数为自定义html动作处理的名字，注意与已有的是否冲突，如果冲突会用新的覆盖旧的（可以用来重写方法而不改变框架原有方法）
*  第二个参数为需处理的元素的jquery选择器表达式
*  第三个参数为js动作初始方法
*  （均为jquery对象）
*  contentE:处理的内容对象，menuli：左侧栏menu，menu：导航栏menu，searchForm：搜索表单，shieldDialog：弹出框
*  第四个参数为方法描述
*/
ShieldJS.HtmlAction.addHTMLEleAction(&quot;selfAction&quot;, &quot;.selfAction&quot;, function(contentE, menuli, menu, searchForm, shieldDialog){
  var dealEle = findAndMarkEle(contentE, this.expression);
  if (dealEle.length > 0) {
      dealEle.unbind(&quot;click&quot;).click(function(){
          ShieldJS.alert(&quot;消息提示&quot;, &quot;自定义js处理动作示例1&quot;, &quot;info&quot;);
          return false;
      });
  }
},&quot;自定义示例一，不带checkFn的函数&quot;);
/**
* @description 示例二，带checkFn的函数
* @field
* 必需：
*  第一个参数为自定义html动作处理的名字，注意与已有的是否冲突，如果冲突会用新的覆盖旧的（可以用来重写方法而不改变框架原有方法）
*  第二个参数为需处理的元素的jquery选择器表达式
*  第三个参数为js动作初始方法
*  （均为jQuery对象）
*  selectE:处理的jquery对象（checkFn中返回的对象），menuli：左侧栏menu，menu：导航栏menu，searchForm：搜索表单，shieldDialog：弹出框
*  第四参数为刷新符合条件的html元素（如是否缺少相关联的父子容器或存储容器），没有符合条件的返回false，有则返回合格条件的jQuery对象
*  （均为jQuery对象）
*  contentE:处理的页面对象，menuli：左侧栏menu，menu：导航栏menu，searchForm：搜索表单，shieldDialog：弹出框
*  第五个参数为方法描述
*/
ShieldJS.HtmlAction.addHTMLEleAction(&quot;selfAction2&quot;, &quot;.selfAction2&quot;, function(selectE, menuli, menu, searchForm, shieldDialog){
  selectE.unbind(&quot;click&quot;).click(function(){
      ShieldJS.alert(&quot;消息提示&quot;, &quot;自定义js处理动作示例2&quot;, &quot;info&quot;);
      return false;
  });
}, function (contentE, menuli, menu, searchForm, shieldDialog) {
  var dealEle = findAndMarkEle(contentE, this.expression);
  if (dealEle.length > 0) {
      // 可进一步筛选
      return dealEle; //返回符合条件的jQuery对象
  }
  return dealEle.length > 0 ? dealEle : false;
},&quot;自定义示例二，带checkFn的函数&quot;);</code></pre></li>
<li><p>内置方法</p>
<ul>
<li><p>1、获取参数</p>
<ul>
<li>getParams(ele, params, attrName) , attrName可以不写，不写默认找shieldParams属性的定义值（json字符串）</li>
<li>getSettings(ele, _default) 取属性shieldSettings的设置值）</li>
<li>getExtendSettings(ele, _default) 取属性shieldSettings的设置值覆盖，不存在则取jQuery.data()设置的属性，一般用于第三方插件的扩展原插件属性。</li>
<li><p>ShieldJS.HtmlAction.checkAnGetParamSelector(ele, params, contentEle);<br>获取动态参数，ele上定义paramSelector属性（值为jQuery选择器表达式）</p>
<pre class="prettyprint source lang-html"><code>&lt;input id=&quot;export&quot; type=&quot;button&quot; class=&quot;shieldA&quot; shieldParams=&quot;{'conn':'${conn}'}&quot; paramSelector=&quot;:checkbox[name='tableName']&quot; data-method=&quot;post&quot; data-url=&quot;${ctxPathA}/system/outdatabase/toOutWord&quot; value=&quot;导出Word表结构&quot;/>
&lt;input type=&quot;checkbox&quot; name=&quot;tableName&quot; value=&quot;name1&quot;/>
&lt;input type=&quot;checkbox&quot; name=&quot;tableName&quot; value=&quot;name2&quot;/>

&lt;javascript>
var ele = $(&quot;#export&quot;);
// 第三个参数contentEle表示查询参数的范围，不写默认查内容页
ShieldJS.HtmlAction.checkAnGetParamSelector(ele, params);
&lt;/javascript></code></pre></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>版本说明</h4><h5>v2.0.0（2018-08-13）</h5><ul>
<li>初版，在原来内部使用的框架基础上改造为通用框架;</li>
</ul></article>
    </section>







		</div>
	</div>

	<div class="clearfix"></div>

	
		<div class="col-md-3">
			<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
		</div>
	

</div>
</div>


    <div class="modal fade" id="searchResults">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Search results</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>


<footer>


	<span class="copyright">
	ShieldJS2 Copyright © 2018-2019 基于JSDoc3 and DocStrap生成的JsDoc说明文档.
	</span>

<span class="jsdoc-message">
	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
	
		on Mon Dec 16th 2019
	
	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>

<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>

    <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>


<script>
$( function () {
	$( "[id*='$']" ).each( function () {
		var $this = $( this );

		$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
	} );

	$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
		var $this = $( this );

		var example = $this.find( "code" );
		exampleText = example.html();
		var lang = /{@lang (.*?)}/.exec( exampleText );
		if ( lang && lang[1] ) {
			exampleText = exampleText.replace( lang[0], "" );
			example.html( exampleText );
			lang = lang[1];
		} else {
			var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
			lang = langClassMatch ? langClassMatch[1] : "javascript";
		}

		if ( lang ) {

			$this
			.addClass( "sunlight-highlight-" + lang )
			.addClass( "linenums" )
			.html( example.html() );

		}
	} );

	Sunlight.highlightAll( {
		lineNumbers : true,
		showMenu : true,
		enableDoclinks : true
	} );

	$.catchAnchorLinks( {
        navbarOffset: 10
	} );
	$( "#toc" ).toc( {
		anchorName  : function ( i, heading, prefix ) {
			return $( heading ).attr( "id" ) || ( prefix + i );
		},
		selectors   : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
		showAndHide : false,
		smoothScrolling: true
	} );

	$( "#main span[id^='toc']" ).addClass( "toc-shim" );
	$( '.dropdown-toggle' ).dropdown();

    $( "table" ).each( function () {
      var $this = $( this );
      $this.addClass('table');
    } );

} );
</script>



<!--Navigation and Symbol Display-->


<!--Google Analytics-->



    <script type="text/javascript">
        $(document).ready(function() {
            SearcherDisplay.init();
        });
    </script>


</body>
</html>